<template>
 
 <div>
	 
	<div id="economicAnalysisMain" class="our-service-sass hide-pr show-pr">
		<div style="margin-top: 5%; " class="container">
			<div class="inner-wrapper">
				<div style="display: inline-flex;width: 100%;" class="row">
					<div style="cursor: pointer;" @click="jumpToPage('elecWaterPlanDesign')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-web user"></i>
							<h5 class="title"><a href="#">制(储)氢系统<br/>规划设计</a></h5>
							<p>Planning and Design of Electrolytic Water Hydrogen Production System</p>
							<a class="detail-button"><i class="icon-img"><img src="../../assets/images/6172532.gif" width="100%"></i></a>
						</div> <!-- /.service-block -->
					</div> <!-- /.single-block -->

					<div style="cursor: pointer;" @click="jumpToPage('hydrogenTransmissionPlanDesign')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-value icon-s"></i>
							<h5 class="title"><a href="#">输氢系统<br/>规划设计</a></h5>
							<p style="margin-bottom: 2.5rem;">Planning and Design of Hydrogen Transmission System</p>
							<a href="#" class="detail-button"><i class="icon-img">
								<img src="../../assets/images/6172518.gif"  width="100%"></i></a>
						</div> 
					</div>
					

					<div style="cursor: pointer;" @click="jumpToPage('hydrogenEnergyPlanDesign')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-value icon-s"></i>
							<h5 class="title"><a href="#">氢能综合供能场景<br/>规划设计</a></h5>
							<p style="margin-bottom: 3.9rem;">Planning and Design of Hydrogen Energy Systems</p>
							<a href="#" class="detail-button"><i class="icon-img">
								<img src="../../assets/images/6172518.gif"  width="100%"></i></a>
						</div> 
					</div>

					<div style="cursor: pointer;" @click="jumpToPage('integratedEnergyPlanDesign')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-login icon-s"></i>
							<h5 class="title"><a href="#">综合能源系统<br/>规划设计</a></h5>
							<p style="margin-bottom: 3.9rem;">Integrated Energy System Planning and Design</p> 
							<a href="#" class="detail-button">
								<i class="icon-img">
								<img src="../../assets/images/6172512.gif" width="100%">
								</i>
							</a>
						</div> 
					</div>
				</div> 
			</div> 
		</div> 


			
		
	
	</div>
	 
	<div style="margin-left: 1vh;margin-right: 1vh;top: 9.9%; width: 99%;height: auto;float: left;position: absolute;">
		<router-view :key="activeDate"></router-view>
	</div>

</div>

</template> 

<script>
    
    import '../../assets/js/script.js';
    import '../../assets/css/economicAnalysisMainStyle.css';
    import '../../assets/css/bootstrap.min.css';

   export default {
    name: 'planAndDesignMain',
    data(){
      return{
        activeDate:'',
      }
    },
    mounted : function(){
      this.activeDate = new Date().getTime();
    },
    methods:{
      
      jumpToPage : function(pageName){
         
        
        this.activeDate = new Date().getTime();


        //路由跳转  
        this.$router.replace({path:'/planAndDesign',query:{"type":pageName}})


      }

    }
  }
</script>
<style scoped>

@media (min-width: 992px) {
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        max-width: 27%;
    }
}
@media (min-width: 1200px) {
    .container {
        /* max-width: 1140px; */
        /* width: 20vh; */
    }
}

@media (min-width: 1200px) {
    .container {
        /* max-width: 1140px; */
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 768px) {
    .container {
        /* max-width: 720px; */
    }
}

@media (min-width: 576px) {
    .container {
        /* max-width: 540px; */
    }
}

</style>
